<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>空气品质</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">

    <link rel="stylesheet" href="${ctx!}/assets/bower_components/amazeui/dist/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${ctx!}/assets/css/colddemo.css">
    <style>
        .addedPic{
            position: absolute;
            color: white;
            border: none;
            width: 206px;
            height: 96px;
            font-size: 12px;
            white-space: nowrap;
            line-height: 26px;
            padding: 0 5px 0 5px;
            overflow:hidden; /*超出的部分隐藏起来。*/
            text-overflow:ellipsis;/*超出文本以省略号显示 */
        }

        .addedPicLeft {
            background:url("${ctx}/assets/img/air-left.png") no-repeat;
            background-size: contain;
        }

        .addedPicRight {
            background:url("${ctx}/assets/img/air-right.png") no-repeat;
            background-size: contain;
        }

    </style>

</head>

<body style="background-color:transparent;">
    <div style=" border:2px #156a97; padding: 15px; box-sizing: border-box; height: 100%; width: 100%; " >
<#--  ${ctx}/assets/img/show-test.gif      -->
        <img style="opacity: 0.8;height: 100%; width: 100%" src="${ctx}/assets/img/air.png" alt="" id="confPic">

    </div>


<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

<#--图片-->
<#--<script src="${ctx!}/assets/bower_components/jquery/dist/jquery.min.js"></script>-->
<script src="${ctx!}/assets/bower_components/amazeui/dist/js/amazeui.min.js"></script>
<script src="${ctx!}/assets/bower_components/MessengerJS/messenger.js"></script>
<script src="${ctx!}/assets/bower_components/layer/layer.js"></script>

<!-- 自定义js -->
<#--<script src="${ctx!}/assets/js/adminPicConfig.js"></script>-->

<script type="application/javascript">

    var confPicPos = $("#confPic").offset();
    confPicPos["width"] = $("#confPic").width();
    confPicPos["height"] = $("#confPic").height();
    var deltax = 206/2, deltay = 96/2;
    leftClass = "addedPicLeft";
    rightClass = "addedPicRight";


    function drawPic(x,y,sideClass,s1,s2) {
        x = x * confPicPos.width;
        y = y * confPicPos.height;
        var top_value = document.getElementById("confPic").offsetTop + document.body.scrollTop;
        var left_value = document.getElementById("confPic").offsetLeft; //left
        var _labelhtml = '<div   style="top:'+(top_value+y-deltay)+'px;left: '+(left_value+x-deltax)+'px" class="addedPic '+sideClass +'"><div style="font-weight: bold">空气质量检测</div><div>'+s1+'</div><div>'+s2+'</div></div>';
        $(_labelhtml).insertAfter('#confPic')
    }

    console.log(document.body.scrollTop);
    console.log(document.getElementById("confPic").offsetLeft);
    console.log(document.getElementById("confPic").offsetTop);
    drawPic(0.2147, 0.7293, leftClass, "${l11}","${l12}");
    drawPic(0.7701, 0.6404, rightClass, "${l21}","${l22}");
    drawPic(0.2147, 0.5526, leftClass, "${l31}","${l32}");
    drawPic(0.7701, 0.4486, rightClass, "${l41}","${l42}");
    drawPic(0.2147, 0.3534, leftClass, "${l51}","${l52}");

</script>


</body>

</html>
